Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🌟 Как реализовать безопасный ввод с помощью валидации на стороне клиента

Валидация на стороне клиента — это первый шаг в обеспечении безопасности данных, вводимых пользователями, прежде чем они попадут на сервер.

Почему важно:

📍 Защищает от XSS и SQL-инъекций

📍 Предотвращает отправку некорректных данных

📍 Повышает UX за счет быстрой обратной связи

Как внедрить:

1. Делаем проверку на пустое поле:

const form = document.querySelector('form');
const input = document.querySelector('input[name="username"]');

form.addEventListener('submit', (event) => {
  if (!input.value.trim()) {
    event.preventDefault();
    alert('Поле не может быть пустым!');
  }
});

2. Проверяем корректность email:

const emailInput = document.querySelector('input[name="email"]');

form.addEventListener('submit', (event) => {
  const email = emailInput.value;
  const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  
  if (!regex.test(email)) {
    event.preventDefault();
    alert('Введите корректный email!');
  }
});

3. Ограничиваем длину пароля:

const passwordInput = document.querySelector('input[name="password"]');

form.addEventListener('submit', (event) => {
  if (passwordInput.value.length < 6) {
    event.preventDefault();
    alert('Пароль должен быть не менее 6 символов!');
  }
});

4. Используем атрибуты HTML5 для валидации:

<form>
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="6" required>
  <button type="submit">Отправить</button>
</form>

5. Экранируем пользовательский ввод для защиты от XSS:

function escapeHtml(text) {
  const element = document.createElement('div');
  if (text) {
    element.innerText = text;
    element.textContent = text;
  }
  return element.innerHTML;
}

const userInput = '<script>alert("XSS")</script>';
const safeInput = escapeHtml(userInput);
console.log(safeInput);

💡 Применение этих методов поможет обезопасить вводимые данные и защитить приложение от популярных угроз.

🐸 Библиотека фронтендера

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

www.tg-me.com/us/Библиотека фронтендера | Frontend JS JavaScript React js Angular js Vue js/com.frontendproglib/6267

1.7K viewsJun 17 at 07:02

🌟 Как реализовать безопасный ввод с помощью валидации на стороне клиента

Валидация на стороне клиента — это первый шаг в обеспечении безопасности данных, вводимых пользователями, прежде чем они попадут на сервер.

Почему важно:

📍 Защищает от XSS и SQL-инъекций

📍 Предотвращает отправку некорректных данных

📍 Повышает UX за счет быстрой обратной связи

Как внедрить:

1. Делаем проверку на пустое поле:

const form = document.querySelector('form');
const input = document.querySelector('input[name="username"]');

form.addEventListener('submit', (event) => {
  if (!input.value.trim()) {
    event.preventDefault();
    alert('Поле не может быть пустым!');
  }
});

const emailInput = document.querySelector('input[name="email"]');

form.addEventListener('submit', (event) => {
  const email = emailInput.value;
  const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  
  if (!regex.test(email)) {
    event.preventDefault();
    alert('Введите корректный email!');
  }
});

const passwordInput = document.querySelector('input[name="password"]');

form.addEventListener('submit', (event) => {
  if (passwordInput.value.length < 6) {
    event.preventDefault();
    alert('Пароль должен быть не менее 6 символов!');
  }
});

<form>
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="6" required>
  <button type="submit">Отправить</button>
</form>

function escapeHtml(text) {
  const element = document.createElement('div');
  if (text) {
    element.innerText = text;
    element.textContent = text;
  }
  return element.innerHTML;
}

const userInput = '<script>alert("XSS")</script>';
const safeInput = escapeHtml(userInput);
console.log(safeInput);